import { Component } from 'react';
import {Button,Tag} from 'antd';

class Demo1 extends Component {
  constructor(props){
      super(props);
      
  }
  state ={
    count:0,
    name:"张三"
  }
  handleClick1(){
    let {count} = this.state;
    //使用普通函数改变this的指向
    this.setState({
    ...this.state,
    count:count + 1
    });
    console.log(this.state,"类中普通函数被调用");
  }
  handleClick2=()=>{
    //箭头函数的this指向父级作用域中的this
    this.setState({
      count:this.state.count + 1,
    });
    console.log(this.state.count,"类中箭头函数被调用");
  }
  render() {
      const {count} = this.state;
    return (
      <div style={{marginTop:"8px"}}>
          <Tag color='cyan'>{this.props ?.str}</Tag>
          <br />
          <Tag color="green">{count}</Tag>
          <br />
          <Button type='primary' onClick={this.handleClick1.bind(this)} style={{marginTop:"8px"}}>普通函数</Button>
          <Button danger  style={{marginLeft:"8px"}} onClick={this.handleClick2}>箭头函数</Button>
      </div>
    );
  }
}

export default Demo1;


/**
 * React定义组件的方式有两种
 *  +类组件:React16.8版本之前几乎React使用的都是类组件
 *  +函数组件:React16.8之后，函数式组件使用的越来越多
 * 类组件：是指通过ES6类来定义的组件称为类组件，
 * +React中定义类组件有如下约定类组件首字母大写
 * +类组件必须要继承React.Component父类，这个父类中的相关方法和属性都能被继承
 * +类组件中必须要有一个render方法这个render必须要有返回值
 * +返回值的内容就是这个类组件的结构(jsx)由于这个类组件要被别的组件引用，所以使用ES6的默认导出将其导出，便于别的组件引用
 * 
 */
